<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>表单 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/36.a99f6d64.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/58.7d6367d9.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>HTML</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/html/互联网基本原理.html" class="sidebar-link">互联网基本原理</a></li><li><a href="/./guide/notes/html/02-基本标签.html" class="sidebar-link">基本标签</a></li><li><a href="/./guide/notes/html/11-表单.html" class="active sidebar-link">表单元素</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/html/11-表单.html#表单组件的分类" class="sidebar-link">表单组件的分类:</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/html/11-表单.html#label标签" class="sidebar-link">label标签</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/html/11-表单.html#下拉选择" class="sidebar-link">下拉选择</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/html/11-表单.html#表单分组" class="sidebar-link">表单分组</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/html/11-表单.html#datalist" class="sidebar-link">datalist</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/html/11-表单.html#文本输入区域" class="sidebar-link">文本输入区域</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/html/11-表单.html#聚焦的伪类" class="sidebar-link">聚焦的伪类</a></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="表单"><a href="#表单" class="header-anchor">#</a> 表单</h1> <blockquote><p><strong>表单----单词课</strong></p> <p><strong>MDN---前端API文档     w3c非前端了解前端知识</strong></p> <p><strong>表单作用 :数据采集;</strong></p> <p>前端收集用户信息会用到表单</p> <p>网页前端展示填写内容,用户填写数据后将本地数据提交给远程服务器</p> <p>form表单和div标签类似,也是划分区域也是在肚子里划分各种各样的内容</p></blockquote> <p>使用form创建一个表单</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">form</span><span class="token punctuation">{</span>
	 <span class="token property">width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>	
&lt;form action=<span class="token string">&quot;&quot;</span> method=<span class="token string">&quot;&quot;</span>&gt;&lt;/form&gt;
<span class="token comment">/*在form标签里填写表单组件 */</span>
<span class="token comment">/*action属性:表单提交的服务器地址 
  method表单提交方式
*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;form action=<span class="token string">&quot;&quot;</span> method=<span class="token string">&quot;&quot;</span>&gt;&lt;/form&gt;
<span class="token comment">/*,默认提交的数据都是get方式.还有一种post方式.
	get获取信息(默认)
	post发送信息

  两者没有什么本质上的区别.
 
  get:表单数据会附加在地址栏上
  post:表单数据会包含在服务器的体内发送给服务器

	 
 target提交页面在何处打开
	_self 当前页打开
    _blank 空白页打开
 */</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p><strong>我们的数据以?开始 name=vlue用&amp;链接进行提交</strong></p> <blockquote><p>表单中添加给用户填写的信息,</p> <p>一条信息由什么构成,信息的名称:信息值</p> <p>姓名:云牧  性别:男    年龄:18    爱好:女;这有几条信息?</p> <p>用什么来收集信息?</p> <p>这时候就需要去Ipnut标签中填写Input的特性,信息的名称:信息的值</p></blockquote> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;span&gt;姓名:&lt;/span&gt;&lt;input type=&quot;text&quot;&gt;

input</span><span class="token punctuation">{</span>
   	<span class="token property">width</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
  	<span class="token property">height</span><span class="token punctuation">:</span>300px<span class="token punctuation">;</span>
    <span class="token comment">/*Input标签的定性分析 单标签  不能添加到内容到input标签之中*/</span>
<span class="token punctuation">}</span>


<span class="token comment">/*1.不独占一行但可以设置宽高说明它是行内块元素*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="表单组件的分类"><a href="#表单组件的分类" class="header-anchor">#</a> 表单组件的分类:</h2> <blockquote><p>全部是用input实现,但Input有种类,通过type进行分类.</p> <p>input标签最终的表现形式和传输至服务器的数据类型,取决于type属性。</p></blockquote> <h3 id="文本输入框"><a href="#文本输入框" class="header-anchor">#</a> 文本输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;text&quot;</span> value=<span class="token string">&quot;&quot;</span>&gt;
<span class="token comment">/*不写type默认text.
  value:文本默认内容.
  input标签有一些默认的样式.
  打开开发者可以看到有默认的padding,我们就需要去清除padding.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">input</span><span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">/*并且我们选中文本框的时候可以发现它周围一圈边框变成了蓝色*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">input</span><span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span>
<span class="token comment">/*outline（轮廓）是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.
  用法和border一模一样.唯一区别:轮廓线不会影响盒子大小(不会影响页面布局)
*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>语法</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input  type=<span class="token string">&quot;text&quot;</span><span class="token punctuation">(</span>文本框<span class="token punctuation">)</span>  name=<span class="token string">&quot;username&quot;</span><span class="token punctuation">(</span>文本框名称<span class="token punctuation">,</span>提交给后台的信息名<span class="token punctuation">)</span>  value=<span class="token string">&quot;用户名&quot;</span><span class="token punctuation">(</span>文本框初始值<span class="token punctuation">)</span> maxlength=<span class="token string">&quot;20&quot;</span><span class="token punctuation">(</span>文本框可输入最多字符<span class="token punctuation">)</span>  placeholder=<span class="token string">&quot;提示文字&quot;</span>&gt;

redonly <span class="token punctuation">(</span>将表单设置为只读<span class="token punctuation">,</span>数据会提交<span class="token punctuation">)</span>
disabled <span class="token punctuation">(</span>将表单设置为禁用<span class="token punctuation">,</span>数据不会提交<span class="token punctuation">)</span>
<span class="token function">autofocus</span><span class="token punctuation">(</span>自动聚焦<span class="token punctuation">)</span>
autocomplete=<span class="token string">&quot;off&quot;</span><span class="token punctuation">(</span>不出现自动补全<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="密码输入框"><a href="#密码输入框" class="header-anchor">#</a> 密码输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;span&gt;<span class="token property">密码</span><span class="token punctuation">:</span>&lt;/span&gt;&lt;input type=<span class="token string">&quot;password&quot;</span> name=<span class="token string">&quot;password&quot;</span><span class="token punctuation">(</span>密码框名称<span class="token punctuation">,</span>提交给后台的信息名<span class="token punctuation">)</span> value=<span class="token string">&quot;用户名&quot;</span><span class="token punctuation">(</span>密码框默认值<span class="token punctuation">)</span> maxlength=<span class="token string">&quot;20&quot;</span><span class="token punctuation">(</span>文本框可输入最多字符<span class="token punctuation">)</span> &gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="按钮"><a href="#按钮" class="header-anchor">#</a> 按钮</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;button&quot;</span> value=<span class="token string">&quot;按钮&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;button&gt;&lt;/button&gt;
<span class="token comment">/*功能需要在js中进行实现*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>提交按钮</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;submit&quot;</span> value=<span class="token string">&quot;提交&quot;</span>&gt;
<span class="token comment">/*把当前表单的所有内容提交出去.
  
如果要修改按钮里默认的文字,修改value即可.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="输入检测"><a href="#输入检测" class="header-anchor">#</a> 输入检测</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;span&gt;<span class="token property">姓名</span><span class="token punctuation">:</span>&lt;/span&gt;&lt;input type=<span class="token string">&quot;text&quot;</span> name=<span class="token string">&quot;username&quot;</span> required&gt;
<span class="token comment">/*现在点提交网址会出现name,required提示用户这个元素的内容必填*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p><strong>required</strong></p> <p>1.规定文本框填写内容不能为空*，否则不允许用户提交表单.</p> <p>2.适合于input标签：text、search、email、password、number、checkbox、radio、file等类型</p></blockquote> <p><strong>pattern</strong></p> <div class="language- extra-class"><pre><code>	用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
</code></pre></div><p><strong>语法：</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;text&quot;</span> name=<span class="token string">&quot;tel&quot;</span>  required pattern=<span class="token string">&quot;^1[358]\d{9}&quot;</span> /&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="搜索框"><a href="#搜索框" class="header-anchor">#</a> 搜索框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;search&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="数字输入框"><a href="#数字输入框" class="header-anchor">#</a> 数字输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;number&quot;</span> step=<span class="token string">&quot;10&quot;</span> max=<span class="token string">&quot;50&quot;</span> min=<span class="token string">&quot;20&quot;</span> value=<span class="token string">&quot;0&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;
<span class="token comment">/*step：步长
  max：可以输入最大值
  min：可以输入的最小值
  value：默认值
*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="输入滑块"><a href="#输入滑块" class="header-anchor">#</a> 输入滑块</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;range&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="单个文件导入"><a href="#单个文件导入" class="header-anchor">#</a> 单个文件导入</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code> &lt;input type=<span class="token string">&quot;file&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="多个文件导入"><a href="#多个文件导入" class="header-anchor">#</a> 多个文件导入</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code> &lt;input type=<span class="token string">&quot;file&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span> multiple&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="邮箱输入框"><a href="#邮箱输入框" class="header-anchor">#</a> 邮箱输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;email&quot;</span> name=<span class="token string">&quot;email&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="日期输入框"><a href="#日期输入框" class="header-anchor">#</a> 日期输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;date&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;<span class="token comment">/*年月日*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="时间输入框"><a href="#时间输入框" class="header-anchor">#</a> 时间输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;time&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;<span class="token comment">/*小时,分钟*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="年月输入框"><a href="#年月输入框" class="header-anchor">#</a> 年月输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;month&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;<span class="token comment">/*年月*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="星期输入框"><a href="#星期输入框" class="header-anchor">#</a> 星期输入框</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;week&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;<span class="token comment">/*年周*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="时间戳"><a href="#时间戳" class="header-anchor">#</a> 时间戳</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;datetime-local&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;<span class="token comment">/*年月日小时分钟*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="调色盘"><a href="#调色盘" class="header-anchor">#</a> 调色盘</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;color&quot;</span> name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="重置按钮"><a href="#重置按钮" class="header-anchor">#</a> 重置按钮</h3> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;reset&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="单选和多选"><a href="#单选和多选" class="header-anchor">#</a> 单选和多选</h3> <h4 id="单选-radio-特性-切换功能"><a href="#单选-radio-特性-切换功能" class="header-anchor">#</a> 单选  radio  特性:切换功能</h4> <p>-- 像这种选择框,必须指定一个value值,vlue最终作为用户填写的值</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;form&gt;	
		男&lt;input type=<span class="token string">&quot;radio&quot;</span> name=<span class="token string">&quot;sex&quot;</span> value=<span class="token string">&quot;boy&quot;</span>&gt;
<span class="token comment">/*1.多个name值相同的按钮，只可以选择一个,才行成对立*/</span>&gt;
		女&lt;input type=<span class="token string">&quot;radio&quot;</span> name=<span class="token string">&quot;sex&quot;</span> value=<span class="token string">&quot;girl&quot;</span>  checked&gt;
<span class="token comment">/*2.value规定了input提交的值*/</span>
&lt;/form&gt;
<span class="token comment">/*默认选中某个元素在后面加checked*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="多选-checkbox-选中和取消的功能"><a href="#多选-checkbox-选中和取消的功能" class="header-anchor">#</a> 多选  checkbox  选中和取消的功能</h4> <div class="language-css line-numbers-mode"><pre class="language-css"><code>林黛玉&lt;input type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;dai&quot;</span>  &gt;
<span class="token comment">/*1.name数据名称*/</span>
薛宝钗&lt;input type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;cha&quot;</span> checked&gt;<span class="token comment">/*2.value服务器传输的数据值*/</span>
王熙凤&lt;input type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;fen&quot;</span>&gt;
<span class="token comment">/*3.name值相同,每个都可选择 同一选项必须同一名字*/</span>
<span class="token comment">/*4.checked将单选按钮设置为默认选中*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="label标签"><a href="#label标签" class="header-anchor">#</a> label标签</h2> <blockquote><p>输入的时候的辅助标签,,扩大元素的选择范围,帮助我们快速选中元素</p> <p>他非常重要,主要用于给表单添加结构,并增强它的可用性和无障碍性.</p> <p>让我们点击label标签的时候也会把输入焦点定位到相关的表单元素.</p></blockquote> <p>第一种是隐式的,把表单控制嵌入到label元素中</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;label&gt;林黛玉&lt;input id=<span class="token string">&quot;dai&quot;</span> type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;dai&quot;</span>&gt;&lt;/label&gt;
&lt;label&gt;薛宝钗&lt;input id=<span class="token string">&quot;cha&quot;</span> type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;cha&quot;</span>&gt;&lt;/label&gt;
&lt;label&gt;王熙凤 &lt;input id=<span class="token string">&quot;fen&quot;</span> type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;fen&quot;</span>&gt;&lt;/label&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>第二种是显示的,把label的for属性设为于相关表单控件的id属性相同的值</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;label for=<span class="token string">&quot;dai&quot;</span>&gt;林黛玉&lt;/label&gt;
&lt;input id=<span class="token string">&quot;dai&quot;</span> type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;dai&quot;</span> &gt;
&lt;label for=<span class="token string">&quot;cha&quot;</span>&gt;薛宝钗&lt;/label&gt;
&lt;input id=<span class="token string">&quot;cha&quot;</span> type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;cha&quot;</span>&gt;
&lt;label for=<span class="token string">&quot;fen&quot;</span>&gt;王熙凤&lt;/label&gt;
&lt;input id=<span class="token string">&quot;fen&quot;</span> type=<span class="token string">&quot;checkbox&quot;</span> name=<span class="token string">&quot;female&quot;</span> value=<span class="token string">&quot;fen&quot;</span>&gt;
<span class="token comment">/*通过for属性与表单控件的id名字进行关联.
 Label元素不一定要紧挨着相关控件.可以离得很远.
  但是从结构的角度来看,把表单控件与相关的label元素分开并不明智,尽量避免这么做.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><blockquote><p>几乎每个表单都会有name和id属性.</p> <p>id属性实在表单输入字段与label元素间建立联系的关键.</p> <p>name属性则是表单正确地将数据提交给服务器的关键.</p> <p>id和name的值可以不一样,但是为了保持一致性,让他们相同比较好.</p></blockquote> <h2 id="下拉选择"><a href="#下拉选择" class="header-anchor">#</a> 下拉选择</h2> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;form action=<span class="token string">&quot;&quot;</span>&gt;
		&lt;select name=<span class="token string">&quot;wife&quot;</span>&gt;
			<span class="token comment">/*1.name下拉列表的名称(提交服务器数据的名字)*/</span>
			&lt;optgroup label=<span class="token string">&quot;活泼俏皮型&quot;</span>&gt;&lt;/optgroup&gt;
			<span class="token comment">/*2.option元素 具体选项 value提交的值*/</span>
			&lt;option value=<span class="token string">&quot;dai&quot;</span>&gt;林黛玉&lt;/option&gt;
			&lt;optgroup label=<span class="token string">&quot;温柔大气型&quot;</span>&gt;&lt;/optgroup&gt;
			<span class="token comment">/*3.给下拉选项说明或者是标签提示*/</span>
			&lt;option value=<span class="token string">&quot;cha&quot;</span> selected&gt;薛宝钗&lt;/option&gt;
			<span class="token comment">/*4.selected默认选中*/</span>
			&lt;optgroup label=<span class="token string">&quot;大家闺秀型&quot;</span>&gt;&lt;/optgroup&gt;
			&lt;option value=<span class="token string">&quot;fen&quot;</span>&gt;王熙凤&lt;/option&gt;
		&lt;/select&gt;
	&lt;/form&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="表单分组"><a href="#表单分组" class="header-anchor">#</a> 表单分组</h2> <div class="language-css line-numbers-mode"><pre class="language-css"><code> <span class="token comment">/* fieldset可以和legend单独设置样式
	fieldset 划分一块区域
	legned定义区域标题*/</span>
	<span class="token selector">fieldset</span><span class="token punctuation">{</span>
            <span class="token property">border</span><span class="token punctuation">:</span> 3px dotted pink<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
	<span class="token selector">legend</span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
	&lt;fieldset&gt;
            &lt;legend&gt;未满十八岁禁止游览&lt;/legend&gt;
            <span class="token property">注册</span><span class="token punctuation">:</span> &lt;input type=<span class="token string">&quot;text&quot;</span>&gt;
 	&lt;/fieldset&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="datalist"><a href="#datalist" class="header-anchor">#</a> datalist</h2> <p>前端HTML所创造的数据,这个数据会被input标签使用</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;input type=<span class="token string">&quot;text&quot;</span> list=<span class="token string">&quot;data1&quot;</span>&gt;
	&lt;datalist id=<span class="token string">&quot;data1&quot;</span>&gt;
        &lt;option value=<span class="token string">&quot;A&quot;</span>&gt;第一条数据&lt;/option&gt;
        &lt;option value=<span class="token string">&quot;AB&quot;</span>&gt;第二条数据&lt;/option&gt;
        &lt;option value=<span class="token string">&quot;ABC&quot;</span>&gt;第三条数据&lt;/option&gt;
        &lt;option value=<span class="token string">&quot;ABCD&quot;</span>&gt;第四条数据&lt;/option&gt;
    &lt;/datalist&gt;  
<span class="token comment">/*input被动态的挂载上了数据,保持文本输入框的list的值与datalist的id值相同即可*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="文本输入区域"><a href="#文本输入区域" class="header-anchor">#</a> 文本输入区域</h2> <div class="language-css line-numbers-mode"><pre class="language-css"><code>&lt;textarea name=<span class="token string">&quot;&quot;</span> id=<span class="token string">&quot;&quot;</span> cols=<span class="token string">&quot;30&quot;</span> rows=<span class="token string">&quot;10&quot;</span>&gt;&lt;/textarea&gt;
<span class="token comment">/*rows属性表示这个文本输入区域默认的高
  cols属性表示这个文本输入区域默认的宽.
  一般是默认可以随意拉伸,如果要禁止拉伸的话.*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code>	<span class="token selector">textarea</span><span class="token punctuation">{</span>
            <span class="token property">resize</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="聚焦的伪类"><a href="#聚焦的伪类" class="header-anchor">#</a> 聚焦的伪类</h2> <p><strong>:foucs伪类  当前表单聚焦(正在输入)</strong></p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">#name:focus</span><span class="token punctuation">{</span>
	<span class="token property">border</span><span class="token punctuation">:</span> 2px solid red<span class="token punctuation">;</span>
	<span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><span class="token comment">/*不要蓝色边框可删除*/</span>
<span class="token punctuation">}</span>
&lt;input type=<span class="token string">&quot;text&quot;</span>  id=<span class="token string">&quot;name&quot;</span>&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.tips</span><span class="token punctuation">{</span>
	<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#name:focus ~ .tips</span><span class="token punctuation">{</span>
	<span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
&lt;input id=<span class="token string">&quot;name&quot;</span> type=<span class="token string">&quot;text&quot;</span>&gt;
&lt;span class=<span class="token string">&quot;tips&quot;</span>&gt;请认真输入哟~~~&lt;/span&gt;<span class="token comment">/*用户体验会变好*/</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="foucs-within"><a href="#foucs-within" class="header-anchor">#</a> foucs-within</h3> <p>一个元素获得焦点，该元素的后代元素获得焦点</p> <p>它或它的后代获得焦点，都可以触发 :focus-within</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">form</span> <span class="token punctuation">{</span>
 	  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span>1px solid #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">form:focus-within</span><span class="token punctuation">{</span>
	<span class="token property">background</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
 	<span class="token property">border</span><span class="token punctuation">:</span> 1px solid skyblue<span class="token punctuation">;</span><span class="token comment">/*唯一一个子元素状态改变,父元素监控的操作.*/</span>
<span class="token punctuation">}</span>
&lt;form action=<span class="token string">&quot;&quot;</span>&gt;
        &lt;input type=<span class="token string">&quot;text&quot;</span> placeholder=<span class="token string">&quot;name&quot;</span>&gt;&lt;br&gt;
        &lt;input type=<span class="token string">&quot;password&quot;</span> placeholder=<span class="token string">&quot;password&quot;</span>&gt;
&lt;/form&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="checked"><a href="#checked" class="header-anchor">#</a> checked</h3> <p>被勾选的状态(适用于input  type=&quot;checkbox/radio&quot; )</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">&lt;form action=&quot;#&quot;&gt;
	&lt;input type=&quot;checkbox&quot; id=&quot;checkbox&quot;&gt;
	&lt;div class=&quot;box&quot;&gt;&lt;/div&gt;
&lt;/form&gt;
.box</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  	<span class="token property">transition</span><span class="token punctuation">:</span>.5s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#checkbox</span><span class="token punctuation">{</span>
	<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span><span class="token comment">/*绝对定位脱离文档流*/</span>
  	<span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token comment">/*透明度为0*/</span>
	<span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span><span class="token comment">/*清除外边距与盒子贴牢*/</span>
<span class="token punctuation">}</span>
<span class="token selector">#checkbox:checked</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token comment">/*被勾选之后的按钮的状态 */</span>
<span class="token selector">#checkbox:checked +.box</span><span class="token punctuation">{</span>
	<span class="token property">width</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span>
	<span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span>
	<span class="token property">background-color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token comment">/*当复选框被选择中的时候让下面兄弟类名为box盒子的盒子变成400px400px宽高背景颜色红色的盒子.*/</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/html/02-基本标签.html" class="prev">
        基本标签
      </a></span> <span class="next"><a href="/./guide/notes/css/03-CSS基本样式和选择器.html">
        01-CSS基本样式和选择器
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/36.a99f6d64.js" defer></script>
  </body>
</html>
